import React, { useEffect } from 'react';
import { message, Table } from 'antd';
import { useStaticState, useTRState } from '@/utils';
import { getColumns } from '@/pages/Personal/components/ThreePersonPower/helper';
import styles from './index.less';
import { personPageList } from '@/services/eam';
import { HttpCode } from '@/utils/contacts';
import { connect } from 'dva';
import UseSizeHoc from '@/components/UseSizeHoc';
function ThreePersonPower(props) {
  const [state, setState] = useTRState({
    data: [
      {
        dept: '333',
      },
    ],
    loading: false,
    current: 1,
    pageSize: 10,
    total: 0,
    sorterObj: {},
    filterChecked: {},
    orderBy: [],
  });

  const staticState = useStaticState({
    TableHoc: UseSizeHoc(Table, { height: '100%', overflowY: 'hidden' }, (size) => {
      return { scroll: { y: (size?.height ?? 400) - 150 } };
    }),
  });

  useEffect(() => {
    getList();
  }, [
    state.pageSize,
    state.current,
    JSON.stringify(state.filterChecked),
    JSON.stringify(state.orderBy),
  ]);

  const getList = async () => {
    setState({
      loading: true,
    });
    let res = await personPageList({
      currentPage: state.current,
      deptIds: _.uniq([
        ...(state?.filterChecked?.deptName || []),
        ...(state?.filterChecked?.deptNum || []),
      ]),
      deptNums: [],
      personPowers: state?.filterChecked?.three || [],
      size: state.pageSize,
      userId: props.currentUser?.personId || '',
      orderBy: state.orderBy || [],
    });
    if (res?.statusCode === HttpCode.SUCCESS) {
      setState({
        loading: false,
        data: res.data || [],
        total: res?.total || 0,
      });
    } else {
      message.error(res?.message || '请求失败');
      setState({ loading: false });
    }
  };

  const handleTableChange = (pagination, filters, sorter) => {
    setState({
      current: pagination.current,
      pageSize: pagination.pageSize,
      orderBy: sorter.order
        ? [
            {
              fieldName: sorter.field,
              sortType: sorter.order === 'ascend' ? 'asc' : 'desc',
            },
          ]
        : [],
    });
  };
  const handleFilter = (id, list) => {
    setState({
      current: 1,
      filterChecked: {
        ...state.filterChecked,
        [id]: list,
      },
      filterVisible: {},
    });
  };

  return (
    <div className={styles.threePersonPowerBox}>
      <div className={styles.title}>三种人权限列表</div>
      <div className={styles.table}>
        <staticState.TableHoc
          styles={{ height: '100%' }}
          columns={getColumns({
            ...state,
            handleFilter,
          })}
          rowKey={(record) => record.deptId + ''}
          dataSource={state.data}
          loading={state.loading}
          onChange={handleTableChange}
          pagination={{
            current: state.current,
            pageSize: state.pageSize,
            total: state.total,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50', '100'],
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条数据`,
          }}
        />
      </div>
    </div>
  );
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(ThreePersonPower);
